<template>
  <div class="wrapper">
  <div class="allwrapper">
  <div class="home">
    <div class="messageCenter">留言板</div>
      <div class="write">
           <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
           <div class="messageButton">
            <el-button type="primary" @click="writeMessage">留言</el-button>
            </div>

      </div>
  </div>
      <div class="message">
        <ul>
          <li v-for="(item,index) in allMessage" :key="index" style="border-bottom:black solid 1px;border-right:black solid 2px">
              <article class="message is-link">
              <div class="message-body">
               <strong>{{item.userName}} : </strong>{{item.message}}
              </div>
              </article>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import bus from '../../Bus/eventBus'
export default {
   data() {
    return {
      textarea: '',
      allMessage:[],
      newUser:''
    }
  },
    methods: {
      writeMessage(){
         axios({
         method:'post',
         url:'http://localhost:8088/add',
         params:{
           userName: this.newUser,
            message:this.textarea

         }
       }).then((res)=>{
          console.log(res);
          this.allMessage=res.data;
          this.textarea=''
       })
      }
    },
    created() {
      this.newUser=this.$route.query.username;
      axios({
        method:'post',
        url:'http://localhost:8088/display',
      }).then((res)=>{
        this.allMessage=res.data;
        console.log(this.allMessage)
      })
    },
}
</script>
<style>
  .allwrapper{
    width: 50%;
    padding-left: 20px;
  }
  .home{
    text-align: center;
    position: absolute;
    right:0px;
    width: 750px;
  }
  .messageCenter{
    margin-bottom: 20px;
  }
  .messageButton{
    margin-top: 20px;
  }
</style>
